<template>
  <div class="course-page-view">
    <div v-if="videoLogList.length > 0">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="— 没有更多了 —"
        class="classList"
        @load="getVideoLogList"
      >
        <router-link
          v-for="item in videoLogList"
          :key="item.Id"
          :to="{name: 'freeDetail',
                query: {
                  courseId: item.Id,
                  classId: item.ClassId,
                  title: item.Name,
                  courseImg: item.ShowCoverUrl
                }}"
          tag="div"
          class="class-item"
        >
          <div class="class-img-box">
            <img
              v-lazy="item.CoverUrl"
              class="class-cover"
            >
          </div>
          <div class="class-item-info-box">
            <div class="class-name">
              {{ item.VideoName }}
            </div>
            <div
              class="class-teacher"
              style="margin-top: 0.25rem"
            >
              学习进度：{{ item.LastStudyTime }}
            </div>
          </div>
        </router-link>
      </van-list>
    </div>
    <div
      v-else-if="videoLogList.length <= 0"
      class="no-class"
    >
      <img
        class="no-img"
        src="~assets/class/no_data.png"
        alt="暂无相关学习记录"
      >
      <span class="no-text">
        您还没有视频学习记录，快去学习吧~
      </span>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data () {
    return {
      videoLogList: [],
      pageSize: 16,
      pageNum: 1,
      loading: false,
      finished: false,
      fatchFinished: false,
    }
  },
  created () {
    this.getVideoLogList()
  },
  methods: {
    getVideoLogList () {
      this.fatchFinished = false
      this.$axios({
        url: 'ytjysite/EStudy/GetVideoLogList',
        data: {
          PageIndex: this.pageNum,
          PageSize: this.pageSize,
        },
      }).then(res => {
        this.$set(this.$data, 'videoLogList',
          [...this.videoLogList, ...res.Items])
        this.fatchFinished = true
        this.loading = false

        if (this.pageNum * this.pageSize >= res.TotalCount) {
          this.finished = true
        } else {
          this.pageNum++
        }
      })
    },
  },
})
</script>

<style lang="scss" scoped>
@import "~scss/class/class.scss";
.course-page-view {
  background: #fff;
  padding-top: 20px;
}

.classList {
  margin: 0 24px;
  padding-top: 2px;
}
.no-class {
  text-align: center;
  font-size: 36px;
  color: #666666;
  margin-top: 300px;
  .no-img {
    width: 200px;
    // height: 250px;
  }
  .no-text {
    margin-top: 9px;
    display: block;
  }
}
.class-item {
  position: relative;
  width: 100%;
  height: 150px;
  margin-bottom: 30px;
}
.class-img-box {
  position: relative;
  width: 250px;
  height: 150px;
  margin-right: 20px;
}
.class-people-back {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 110px;
  height: 32px;
  line-height: 32px;
  font-size: 22px;
  color: #fff;
  text-align: center;
  background:rgba(0,0,0,0.5);
  border-bottom-right-radius: 6px;
  border-top-left-radius: 6px;
}
.class-name {
  padding-top: 8px;
}
.class-teacher {
  // display: inline-block;
  width: 100%;
  color: #333333;
  font-size: 24px;
  padding-top: 35px;
  @include ellipsis;
}
// .video-list-item {
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
//   height: 130px;
//   border-bottom: 1px solid #eaeaea;
//   &:last-child {
//     border-bottom: none;
//   }
//   .video-name {
//     color: #333;
//     font-size: 36px;
//   }
//   .video-time {
//     color: #666;
//     font-size: 30px;
//   }
// }
</style>
